<template>
	<view class="content  border-bc">
		<view class="mt-110 j-center top-text ml-30">
			新增关注
		</view>
	</view>
	<view class="content border-bc flex-space">
		<view class="flex">
			<view class="a-center">
				<view class="user-icon"></view>
			</view>
			<view class="ml-30">
				<view class="user-name">周杰伦</view>
				<view class="tips-box mt-10">通讯录好友</view>
				<view class="time-text mt-10">03-02 开始关注你了</view>
			</view>
		</view>
		<view class="a-center">
			<navigator class="btn-chat" url="/pages/chat/chat_details/chat_details">发私信</navigator>
		</view>
	</view>
	<view class="content border-bc flex-space">
		<view class="flex">
			<view class="a-center">
				<view class="user-icon"></view>
			</view>
			<view class="ml-30">
				<view class="user-name">林俊杰</view>
				<view class="time-text mt-10">03-01 Ta关注了你，期待你的回关</view>
			</view>
		</view>
		<view class="a-center">
			<navigator class="btn-chat" url="/pages/chat/chat_details/chat_details">发私信</navigator>
		</view>
	</view>
	<view class="content border-bc flex-space">
		<view class="flex">
			<view class="a-center">
				<view class="user-icon"></view>
			</view>
			<view class="ml-30">
				<view class="user-name">林俊杰</view>
				<view class="time-text mt-10">03-01 Ta关注了你，期待你的回关</view>
			</view>
		</view>
		<view class="a-center">
			<navigator class="btn-chat-2" url="/pages/chat/chat_details/chat_details">回关</navigator>
		</view>
	</view>
	<view class="icon-back pos-fixed back-pos" @click="back">
		<image src="/static/images/icon_back.png" mode="aspectFill" class="img"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 30rpx;
	}

	.pos-fixed {
		position: fixed;
		z-index: 999;
	}

	.back-pos {
		top: 110rpx;
		left: 30rpx;
	}

	.mt-110 {
		margin-top: 110rpx;
	}

	.top-text {
		width: 90%;
		font-size: 34rpx;
	}

	.border-bc {
		border-bottom: 1rpx solid #ededed;
	}

	.tips-box {
		width: 53%;
		padding: 10rpx;
		background-color: #ededed;
		font-size: 24rpx;
		font-weight: 400;
	}

	.btn-chat {
		width: 90rpx;
		height: 40rpx;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		border: 1rpx solid #ededed;
		text-align: center;
		font-size: 28rpx;
	}

	.btn-chat-2 {
		width: 90rpx;
		height: 40rpx;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		border: 1rpx solid red;
		color: red;
		text-align: center;
		font-size: 28rpx;
	}
</style>